<template>
  <div class="box">
    <p class="p_title">
      <el-button type="text" style="float: left;color: #000;font-size: 16px">模板列表</el-button>
      <el-select v-model="mbList" placeholder="请选择模板" style="width: 20%;margin-left: 60px" clearable  @change="mbListEvent(mbList)">
        <el-option
          v-for="item in mbOptions"
          :key="item.type"
          :label="item.typeName"
          :value="item.type">
        </el-option>
      </el-select>
      <el-button style="float: right" @click="seeEvent(3,2)" type="primary"> + 添加模板</el-button>
    </p>
    <el-table
      :data="tableData"
      border
      style="width: 100%;">
      <el-table-column align="center" type="index" width="150" label="序号"></el-table-column>
      <el-table-column align="center" prop="name" width="350" label="模板名"></el-table-column>
      <el-table-column align="center" prop="type" width="350" label="模板类型" :formatter="typeName"></el-table-column>
      <el-table-column align="center" prop="index" label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="seeEvent(1,2,scope.row)" type="primary">查看</el-button>
          <el-button size="small" @click="seeEvent(2,2,scope.row)" type="primary">编辑</el-button>
          <el-button size="small" @click="deleteTemplate(scope.row)" type="primary">注销</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
  import {$aos} from "../../../store/state";
  import {http} from "../../../assets/commonjs/axios";

  export default {
    name: "userManagement",
    data() {
      return {
        mbList:'',
        mbOptions:[],
        tableData: [],
      }
    },
    created() {
      this.templateList();
      this.getModil();
    },
    methods: {
      mbListEvent(id){
        http('post','permission/operate_model',{
          applyType:5,
          type:id
        }).then(res=>{
          if (res.data.success) {
            let info = res.data.data || [];
            this.tableData = info;
          }
        })
      },
      getModil() {
        http('post', 'permission/list_model_type',).then(res => {
          if (res.data.success) {
            let info = res.data.data || [];
            if(info){
              this.mbOptions = info;
            }
          }
        })
      },

      deleteTemplate(row) {
        this.$confirm('此操作将永久注销该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          http('post', 'permission/operate_model', {
            applyType: 3,
            id: row.id,
          }).then(res => {
            this.$message({type: 'success', message: res.data.msg});
            this.templateList()
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      typeName(row) {
        let Type = row.type;
        switch (Type) {
          case '01':
            return "规划部门";
          case '02':
            return "建设部门";
          case '03':
            return "并联部门";
          case '04':
            return "告知部门";
          case '05':
            return "掘路部门";
          case '99':
            return "管委会";
        }
      },
      templateList() {
        http('post', 'permission/operate_model', {
          applyType: 5
        }).then(res => {
          if (res.data.success) {
            let info = res.data.data || [];
            this.tableData = info;
          }
        })
      },
      //key是标识是编辑还是查看还是..等等，index是标识是侧边栏的第几个
      //index: 1(添加单位)，2（模板设置），3（审计信息）4（个人信息）
      //row
      seeEvent(key, index, row) {
        $aos.setItem('tabNum', key);
        $aos.setItem('templateData', row);
        this.$router.push({path: '/containerDetail', query: {index: index}})
      }
    },

  }

</script>
<style scoped>
  .box {
    background: #fff;
    height: 100%;
    padding: 0 30px;
  }

  .p_title {
    padding: 10px 40px 10px 20px;
    overflow: hidden;
    margin: 0;
  }
</style>
